<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="../../js/jquery3.2.js"></script>
<title>用户登录界面</title>
<style>
	.yangshi{
		margin:100px 30%;
	}
</style>
<script type="text/javascript">
	$(function(){
		//判断账号是否输入正确
		$("#account").blur(function(){
			var account=$("#account").val();
			var hint=$("#hintaccount");
			var reg1=/\S/;
			if(!reg1.test(account)){
				hint.text("账号不能为空");
				hint.css("color","red");
				return false;
			}
			if(account.length==11){
				var reg3=/^\d{11}$/;
				if(reg3.test(account)){
					hint.text("账号输入正确");
					hint.css("color","green");
					return true;
				}else{
					hint.text("账号可以是手机号码");
					hint.css("color","red");
					return false;
				}
			}else{
				var reg2=/^.\w+$/;
				var reg4=/^\w{5,10}$/;
				if(!reg2.test(account)){
					 hint.text("账号必须由数字，字母，下划线组成");
					hint.css("color","red");
					return false;
				}else if(!reg4.test(account)){
					hint.text("账号的长度在５～１0为之间");
					hint.css("color","red");
					return false;
				}else{
					hint.text("账号输入正确");
					hint.css("color","green");
					return true;
				}
			}
		}); 
		//判断密码是否输入正确
		$("#pwd").blur(function(){
			var pwd=$("#pwd").val();
			var hint=$("#hintpwd");
			var reg1=/\S/;
			if(!reg1.test(pwd)){
				hint.text("密码不能为空");
				hint.css("color","red");
				return false;
			}
			var reg=/^.{6,10}$/;
			if(!reg.test(pwd)){
					hint.text("密码的长度在６～１0为之间");
					hint.css("color","red");
					return false;				
			}else{
				hint.text("账号输入正确");
				hint.css("color","green");
				return true;
			}
		});
</script>
</head>
<body>
	<div class="yangshi">
		<form name="formname" action="/servlet/regection" method="post"  onsubmit="return onsubmit()">
			账号：<input id="account" name="account" type="text" style="width:200px;height:30px;margin-bottom: 20px;">
				<span id="hintaccount"></span>
			</br>
			密码：<input id="pwd" name="pwd" type="password" style="width:200px;height:30px;">
				<span id="hintpwd"></span>
			</br>
			<input type="reset" value="重置" style="margin-top: 20px">&nbsp;&nbsp;&nbsp;
			<input  type="submit" value="登录" style="margin-top: 20px">
		</form>
		
	</div>
</body>
</html>